<div class="judul"><?php echo "$title";?></div>
<?php

?>
<script type="text/javascript">
  var pageUrl = new Array();
  pageUrl[1] = "<?php echo site_url('ajax_target/getPerangkinganAdikAsuh/1');?>";
  pageUrl[2] = "<?php echo site_url('ajax_target/getPerangkinganAdikAsuh/2');?>";
  pageUrl[3] = "<?php echo site_url('ajax_target/getPerangkinganAdikAsuh/3');?>";
  function loadTab(id)
  {
        if (pageUrl[id].length > 0)
        {
                $("#preloader").show();
                $.ajax(
        {
            url: pageUrl[id], 
            cache: false,
            type: 'POST',
            dataType: 'json',
            success: function(message) 
            {			   
                var string = "";
                string += "<div class='data-list'><table class='tabel' width='80%'>"+
                    "<tr><th>No</th><th>Adik Asuh</th><th>Sekolah</th><th>Kelas</th><th>Tahun Ajaran</th><th>Nilai Rata-Rata</th></tr>";
                for(var i=0;i<message.length;i++){
                    var klass = (i%2)?'even':'odd';
                    string += "<tr class='"+klass+"'><td align='center'>"+(i+1)+"</td><td>"+message[i].adik_asuh+"</td><td>"+message[i].sekolah+"</td><td>"+message[i].kelas+"</td><td>"+message[i].tahun_ajaran+" "+message[i].semester+"</td><td>"+Math.round(message[i].nilai*100)/100+"</td></tr>";
                }
                string += "</table>";
                $('#tabcontent').html(string);       	
                $("#preloader").hide();             
            }
        });			        
        }
  }
  $(document).ready(function(){
        $('#tab1').addClass('active');
        loadTab(1);
        $("#preloader").hide();

        $("#tab1").click(function()
        {
            $('.navcontainer').children('ul').children('li').children('a').removeClass('active');
            $(this).addClass('active');
            loadTab(1);
        });

        $("#tab2").click(function()
        {
            $('.navcontainer').children('ul').children('li').children('a').removeClass('active');
            $(this).addClass('active');
            loadTab(2);
        });

        $("#tab3").click(function()
        {
            $('.navcontainer').children('ul').children('li').children('a').removeClass('active');
            $(this).addClass('active');
            loadTab(3);
        });
  });
</script>
<div class="container">
    <div class="navcontainer">
    <ul>
        <li><a href="#" id="tab1">SD</a></li>
        <li><a href="#" id="tab2">SMP</a></li>
        <li><a href="#" id="tab3">SMA</a></li>
    </ul>
    </div>
    <div id="preloader">
        <img src="<?php echo base_url()."system/image/loading.gif"?>" align="absmiddle"/> Loading..
    </div>
    <div id="tabcontent">
        
    </div>
</div>
